<template>
    <div class=" displayFlexC" style="flex: 1">
        <div style="margin-bottom: 1vh;">
            <vxe-button @click="exportDataEvent" style="width: 15vh;" class="fr"><i class="vxe-icon--download"></i> 导出</vxe-button>
        </div>
        <!-- show-footer -->
        <!-- :footer-method="footerMethod" -->
        <vxe-table
        ref="xTable"
        :filter-config="{showIcon: false}"
        show-header-overflow
        border
        stripe
        align="center"
        highlight-hover-row
        :span-method="mergeRowMethod"
        :loading="loading"
        :data="tableData"
        :export-config="{}"
        row-id="id"
        :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}">
            <!-- <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column> -->
            <!-- <span v-if="rowWidth"> -->
                <vxe-table-column :field="item.name" :title="item.remark" v-for="(item, index) in tableName" :key="index"></vxe-table-column>
            <!-- </span> -->
            <!-- <span v-else> -->
                <!-- <vxe-table-column :field="item.name" :title="item.remark" v-for="(item, index) in tableName" :key="index"></vxe-table-column> -->
            <!-- </span> -->
        </vxe-table>
        <!-- 分页 -->
        <vxe-pager
        perfect
        size="mini"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :page-sizes="tablePage.pageSizes"
        :total="tablePage.totalResult"
        @page-change="pageChange"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
        </vxe-pager>
    </div>
</template>
<style lang="scss" scoped>
@import '../../styles/all.scss';
</style>
<script>
import { getFormFiledAndDataById } from '@/api/Data_filling'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            loading: false,
            tableData: [],
            // 分页
            tablePage: {
                currentPage: 1,
                pageSize: 10,
                pageSizes: [10, 20,  30, 40],
                totalResult: 0
            },
            // 表字段  和 数据
            tableName: null,
            rowDataId: null,
            rowWidth: false
        }
    },
    watch:{
    },
    methods:{
        // 根据页切换
        pageChange(val){
            console.log('page val', val)
            this.tablePage.currentPage = val.currentPage
            let page = val.currentPage
            let limit = val.pageSize
            this.getTable(page, limit, this.rowDataId)
        },
        getTable(page, limit, id){
            // 根据 id 查询对应的字段 和 数据
            getFormFiledAndDataById(page, limit, id).then(res => {
                console.log("form data", res)
                if(res.code == 200){
                    let num = res.data.table.length
                    switch(num >= 10){
                        case true:
                            this.rowWidth = true
                            break;
                        default:
                            this.rowWidth = false
                            break
                    }
                    console.log("this.rowWidth", this.rowWidth)
                    this.tableName = res.data.table
                    this.tableData = res.data.list.data
                    this.tablePage.totalResult = res.data.list.count
                } else if (res.code == -1) {
                    this.rowWidth = false
                    this.tableName = null
                    this.tableData = null
                    this.tablePage.totalResult = 0
                } else {
                    console.log('1111999')
                }
                
            })
        },
        getData(id){
            console.log("id", id)
            this.rowDataId = id
            this.getTable(this.tablePage.currentPage, this.tablePage.pageSize, id)
        },
         // 通用行合并函数（将相同多列数据合并为一行）
        mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
            const fields = ['company_name']
            const cellValue = row[column.property]
            if (cellValue && fields.includes(column.property)) {
                const prevRow = visibleData[_rowIndex - 1]
                let nextRow = visibleData[_rowIndex + 1]
                if (prevRow && prevRow[column.property] === cellValue) {
                    return { rowspan: 0, colspan: 0 }
                } else {
                    let countRowspan = 1
                    while (nextRow && nextRow[column.property] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex]
                    }
                    if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 }
                    }
                }
            }
        },
        // sumNum (list, field) {
        //     let count = 0
        //     list.forEach(item => {
        //     count += Number(item[field])
        //     })
        //     return count
        // },
        // footerMethod ({ columns, data }) {
        //       return [
        //         columns.map((column, columnIndex) => {
        //           if (columnIndex === 0) {
        //             return '和值'
        //           }
        //           if (['trem_value'].includes(column.property)) {
        //             return this.sumNum(data, column.property)
        //           }
        //           return null
        //         })
        //       ]
        // },
        // 导出
        exportDataEvent () {
            this.$refs.xTable.openExport({
                // 默认勾选源
                original: true
            })
        },
        
    },
    created(){},
    mounted(){
    },
}
</script>